<template>
	<div class="main">
		<div class="status">
			<div class="status-active">
				<div class="status-img">
					<img src="@/assets/images/wechat/lawyer/consultdetail/status-finish.png">
				</div>
				<div class="status-title">工单创建</div>
			</div>
			<div :class="consultLawyerData.status>=2?'status-active':''">
				<div class="status-img">
					<img v-if="consultLawyerData.status>=2" src="@/assets/images/wechat/lawyer/consultdetail/status-circle.png">
				</div>
				<div class="status-title">工单完成</div>
			</div>
			<div :class="consultLawyerData.status>=3?'status-active':''">
				<div class="status-img">
					<img v-if="consultLawyerData.status>=3" src="@/assets/images/wechat/lawyer/consultdetail/status-circle.png">
				</div>
				<div class="status-title">评价完成</div>
			</div>
		</div>
	
		<div class="menu">
			<div class="menu-title">工单详情</div>
			<div class="order">
				<ul>
					<li>
						<div class="order-title">用户账号</div>
						<div class="order-content">{{studentData.acctno}}</div>
						<div style="clear: both;"></div>
					</li>
					<li>
						<div class="order-title">用户姓名</div>
						<div class="order-content">{{studentData.name}}</div>
						<div style="clear: both;"></div>
					</li>
					<li>
						<div class="order-title">所属院校</div>
						<div class="order-content">{{studentData.schoolName}}</div>
						<div style="clear: both;"></div>
					</li>
					<li>
						<div class="order-title">职业</div>
						<div v-if="consultLawyerData.consultantType==1" class="order-content">学生</div>
						<div v-else class="order-content">教师</div>
						<div style="clear: both;"></div>
					</li>
					<li>
						<div class="order-title">手机号</div>
						<div class="order-content">{{studentData.mobilePhone}}</div>
						<div style="clear: both;"></div>
					</li>
					<li>
						<div class="order-title">咨询类型</div>
						<div class="order-content">
							<select v-model="consultLawyerData.consultTypeId" class="order-select">
								<option v-for="(item,index) in consultTypeList" :key="item.id" v-bind:value="item.id">{{item.title}}</option>
							</select>
						</div>
						<div style="clear: both;"></div>
					</li>
					<li>
						<div class="order-title">风险等级</div>
						<div class="order-content">
							<select v-model="consultLawyerData.riskLevel" class="order-select">
								<option value="1">轻微(1级)</option>
								<option value="2">关注(2级)</option>
								<option value="3">警惕(3级)</option>
								<option value="4">重大(4级)</option>
								<option value="5">高危(5级)</option>
								<option value="6">重大(6级)</option>
							</select>
						</div>
						<div style="clear: both;"></div>
					</li>
	
					<li>
						<div class="order-title">问题描述</div>
						<div class="order-desc">{{consultLawyerData.description}}</div>
					</li>
				</ul>
			</div>
		</div>
		<!--/工单详情-->
	
	
		<!--评分-->
		<div class="score">
			<div class="menu-title">评分</div>
			<ul>
				<li @click="changeScore(1)" :class="consultLawyerData.score>=1?'score-active':''"></li>
				<li @click="changeScore(2)" :class="consultLawyerData.score>=2?'score-active':''"></li>
				<li @click="changeScore(3)" :class="consultLawyerData.score>=3?'score-active':''"></li>
				<li @click="changeScore(4)" :class="consultLawyerData.score>=4?'score-active':''"></li>
				<li @click="changeScore(5)" :class="consultLawyerData.score>=5?'score-active':''"></li>
			</ul>
		</div>
		<!--/评分-->
	
		<!--评价-->
		<div class="menu">
			<div class="menu-title">评价</div>
			<textarea v-model="consultLawyerData.evaluate" class="evaluate" rows="6"></textarea>
		</div>
		<!--/评价-->
	
		<div class="end">
			<router-link v-if="consultLawyerData.status==1" class="end-btn" :to="{path:'chatroom',query: {id: consultLawyerData.id}}" >继续对话</router-link>
			<div @click="ajaxUpdateConsultLawyer()" class="end-btn">结束工单</div>
			<div @click="riskWarningAdd()" v-show="consultLawyerData.riskLevel>=2" class="end-btn">预警推送</div>
	
		</div>
	</div>
</template>

<script>
//引入js	
import router from '@/router/index'

import {lawyerFindConsultLawyerById, lawyerUpdateConsultLawyerById} from '@/api/consultlawyer'
import { lawyerSelectConsultType } from '@/api/consulttype'
import { lawyerFindStudentById } from '@/api/student'

export default {
	components: {
	},
    data(){
		return {
			consultLawyerData:{},
			studentData:{},
			consultTypeList:[],
			pageData:{
				pageNo:1,
				pageSize:20,
				total:0
			}
		}
    },
    created:async function(){
		var ajaxData={}
		ajaxData.id=this.$route.query.id
		var resultData = await lawyerFindConsultLawyerById(ajaxData)
		if(resultData.code==200){
		   this.consultLawyerData=resultData.data;
		}
		
		ajaxData={}
		ajaxData.id=this.consultLawyerData.consultantId
		var resultData = await lawyerFindStudentById(ajaxData)
		if(resultData.code==200){
		   this.studentData=resultData.data
		}
		
		ajaxData={}
		ajaxData.pageNo=this.pageData.pageNo
		ajaxData.pageSize=this.pageData.pageSize
		var resultData = await lawyerSelectConsultType(ajaxData)
		if(resultData.code==200){
		   this.consultTypeList=resultData.data.consultTypeList
		}
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
  		changeScore:function(score){
			var that=this;
			that.consultLawyerData.score=score;
		},
		ajaxUpdateConsultLawyer:async function(){
			var that=this;
			if(!that.consultLawyerData.evaluate||that.consultLawyerData.evaluate.lenght>100)
			{
				alert("评论不符合格式要求");
				return 0;
			}
			that.ajaxData={};
			that.ajaxData.id=that.consultLawyerData.id;
			that.ajaxData.consultTypeId=that.consultLawyerData.consultTypeId;
			that.ajaxData.riskLevel=that.consultLawyerData.riskLevel;
			that.ajaxData.score=that.consultLawyerData.score;
			that.ajaxData.evaluate=that.consultLawyerData.evaluate;
			that.ajaxData.status=2
			var resultData = await lawyerUpdateConsultLawyerById(that.ajaxData)
			if (resultData.code == 200) {
				alert(resultData.msg)
				router.push({
					path: '/wechatlawyer/consultlist'
				});
				return 0;
			} else {
				alert(resultData.msg)
			}
		},
		riskWarningAdd:function(id){
			var that=this;
			router.push({path:'/wechatlawyer/riskwarningadd',query: { id: that.consultLawyerData.id }});
		}
  	}
}
</script>

<style lang="scss" scoped>
.main{ 
	width:100%;
	overflow:hidden;  
	position: relative;
}
.menu {
	width: 90%;
	margin: auto;
}

.menu-title {
	width: 100%;
	line-height: 1.5rem;
	font-size: 1rem;
	color: #0154bc;
	position: relative;
	text-indent:1.25rem ;
	margin-top: 1.25rem;
}

.menu-title:after {
	content: ' ';
	position: absolute;
	left: 0;
	top:0.375rem;
	width: 0.75rem;
	height:0.75rem;
	background-color: #0154bc;
	border-radius:50%;
}

.order {
	width: 100%;
	border-bottom: 0.125rem solid #E3ECF8;
	margin-top: 0.625rem;
	overflow: hidden;
}

.order-title {
	float: left;
	line-height: 1.875rem;
	color: #0154bc;
	font-size: 0.875rem;
}

.order-content {
	width: 7.5rem;
	float: right;
	line-height: 1.875rem;
	color: #000;
	font-size: 0.875rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.order-select {
	outline:none;
	width: 100%;
	height: 1.625rem;
	border: 0.05rem solid #ddd;
	border-radius: 0.25rem;
	color: #000;
	margin-top: 0.125rem;
}

.order-desc {
	width: 100%;
	float: left;
	color: #000;
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-bottom: 0.625rem;
}

.log {
	width: 100%;
	padding: 1.2rem;
	box-sizing: border-box;
	box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, .1);
	border-radius: 0.25rem;
	margin-top: 0.625rem;
}

.evaluate {
	width: 100%;
	line-height:1.25rem;
	box-sizing: border-box;
	box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, .1);
	border-radius: 0.25rem;
	border: none;
	color: #000000;
	padding: 1.2rem;
	resize: none;
	outline:none;
	margin-top: 0.625rem;
	font-size: 0.875rem;
}

.score{
	width: 90%;
	margin: auto;
	overflow: hidden;
}
.score>ul {
	width: 17.5rem;
	margin: auto;
	display: flex;
	margin-top: 0.625rem;
}

.score>ul>li {
	width:2.5rem;
	height:2.5rem;
	border-radius: 50%;
	margin-left: 1.25rem;
	background: #dcdcdc;
}
.score>ul>li:nth-child(1){
	margin-left: 0 !important;
}

.score-active {
	background: #0154bc !important;
}

.log-item {
	color: #BFBFBF;
	padding-bottom: 0.625rem;
	position: relative;
}
.log-item::before{
	content: "";
	width:0.375rem;
	height:0.375rem;
	background-color: #fff;
	border-radius: 50%;
	border:0.25rem solid #0154bc;
	position: absolute;
	top: 0.375rem;
	left: 0;
	z-index: 1;
}

.log-item::after{
	content: "";
	border: 1px dashed  #0154bc;
	height: 100%;
	position: absolute;
	top: 0.875rem;
	left:0.375rem;
	z-index: 0;
}

.log-item:last-child:after{
	border-color:#ffffff !important;
}

.log-item>p {
	margin-left: 1.25rem;
	color: #b9b9b9;
	font-size: 0.875rem;
}

.log-item>span {
	margin-left: 1.25rem;
	color: #b9b9b9;
	font-size: 0.75rem;
}

.end {
	margin-top: 1.25rem;
	margin-bottom: 3.125rem;
}

.end-btn {
	display: block;
	width: 90%;
	margin: auto;
	margin-bottom: 0.5rem;
	background: #0154bc;
	color: #fff;
	line-height: 3rem;
	font-size:1.125rem;
	text-align: center;
	border-radius: 0.25rem;
	font-weight: bold;
	box-shadow: 0 0  0.375rem 0 rgba(186, 186, 186, 1);
}

.status {
	width: 100%;
	display: flex;
	margin-top: 1.25rem;
}

.status>div {
	width: 33.33%;
	position: relative;
}

.status-img {
	width: 2.25rem;
	height:2.25rem;
	overflow: hidden;
	margin: auto;
	background-color: #bfbfbf;
	border-radius: 50%;
	position: relative;
}

.status-img>img {
	width: 1rem;
	height: 1rem;
	position: absolute;
	left: 0.625rem;
	top: 0.625rem;
	z-index: 1;
}

.status-title {
	width: 100%;
	text-align: center;
	color: #bfbfbf;
	line-height: 1.5rem;
	font-size: 0.875rem;
}

.status>div::before {
	content: "";
	width: 50%;
	height: 0.25rem;
	position: absolute;
	top: 1rem;
	left: 0;
	z-index: -1;
	background-color:#bfbfbf;
}

.status>div::after {
	content: "";
	width: 50%;
	height: 0.25rem;
	position: absolute;
	top: 1rem;
	right: 0;
	z-index: -1;
	background-color: #bfbfbf;
}

.status-active>.status-img {
	background-color: #0154bc !important;
}

.status-active>.status-title {
	color: #0154bc !important;
}

.status-active::before {
	background-color: #0154bc !important;
}

.status-active::after {
	background-color: #0154bc !important;
}

.status>div:nth-child(1)::before {
	background-color: #fff !important;
}

.status>div:nth-last-child(1)::after {
	background-color: #fff !important;
}
</style>
